<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<link rel="stylesheet" href="gadgets.css" type="text/css" />

<title>Parallel Coordinates</title>
</head>

<body>


<h1 class="title">Liquid Diagrams</h1>

<p class="title">
&copy;2009 Martin Lessacher<br/>
</p>


<h2 class="title">Parallel Coordinates</h2>
<p>The parallel coordinates visualisation was invented in 1885 by Maurice d'Ocagne and later independently rediscovered by Alfred Inselberg in 1959. It is a popular and effective way to visualise high-dimensional data. High-dimensional data can be imagined as a number of dimensions or attributes (for example for a car: speed, price, acceleration, ...) and appropriate data entities or records (objects such as individual charts) containing one value for each of these dimensions.</p>

<p>The visualisation is constructed by dividing up the available space into N separate axes, where N is the number of data dimensions. The highest and the lowest value of each dimension's entities are taken as the corresponding upper and lower axis limits. The next step is to take an entity, and draw its values relative to the upper and lower boundary on the corresponding axis. Afterwards the data points are connected by lines, leading to an entity characteristic line or polyline. This line drawing process is then carried out for each entity.</p>

<p>Parallel coordinates are especially useful for detecting patterns and comparing individual data entities. In order to detect patterns it is very helpful to be able to rearrange specific axes.</p>

<br />
	<a href="images/parcoord.png"><img class="center" src="images/parcoord.png" alt="The Liquid Diagrams parallel coordinates visualisation." width="650" height="350"/></a>
<br />
<br/>

<h2 class="title">Features</h2>

<b>Changing the colours of entities</b><br/>
<p>Initially the colours used in a visualisation depend on the chosen colour scheme. Colour schemes
are colour palettes that define a limited amount of colours that are used in a visualisation. The 
colour schemes where taken from <a href="http://de-de.colourlovers.com">COLOURLovers</a>. If a colour scheme has
less colours defined than entities are present in a data set the colours are repeated.</p>

<p>All colours used to draw entities can be changed by using a colour picker. To change the colour of a specific entity the user has to
click on the colour rectangle, representing the entities colour, in the legend panel. This will bring
up the colour picker. After selecting the colour the selection is verified with the Ok button and the
colour is immediately assigned to the entity.</p><br/>

<b>Change data point representations</b><br/>
<p>All diagrams using lines to represent entities use data points to display the known data. The style
and the size of these data points can be changed by clicking on the data point representation of
the desired entity in the legend panel. This will bring up the data point picker (see Section 3.1.3
DataPoint Picker) to choose a new style and size.</p><br/>

<b>Changing fonts</b><br/>
<p>All the fonts used in the visualisations can be replaced by other fonts. To do this the user has to switch
to the "Font" panel in the options and choose a font colour, size and type for the desired font 
category. When using the corresponding buttons it is possible to set the font style to bold, italic and 
underline. The selected fonts are loaded on runtime into the gadget.</p><br/>

<b>Hide single entities</b><br/>
<p>Entities can be hidden by clicking on an entities name in the legend panel while holding down the
ALT key. Clicking once more will show the entity again.</p><br/>

<b>Select single or multiple entities</b><br/>
<p>To select an entity the user has to click on the entities name. The selection of an entity will partially
fade all non selected entities. Multiple selections can be made by holding down the CRTL
key while selecting additional entities.</p><br/>

<b>Changing diagram titles</b><br/>
<p>The user can dynamically alter the diagram title, the x-axis title, and the y-axis tile by clicking on
the appropriate label. A text box will then appear to enter the new title. The edit process is finished
by confirming the changes with the enter key.</p><br/>

<b>Filter entities</b><br/>
<p>Entities can be filtered out by dragging the top and bottom slider thumb of each axis. When an
entity drops out between the two slider thumbs of an axis this entity is filtered out resulting in a
partial fade of this entity.</p><br/>

<b>Changeable axis positions</b><br/>
<p>The position of the axes can be rearranged by dragging and dropping the axis labels to a different
position in the visualisation. This enables to better identify patterns in the data.</p><br/>

<b>Inversion of axes</b><br/>
<p>The usual way the axes are built up is that the lowest value is at the bottom and the highest value
at top of the axis. This can be changed by clicking on the axis inverse button located above the
specific axis. A further click will reset the axis.</p><br/>

<b>Transpose the data</b><br/>
<p>All Liquid Diagrams Gadgets offer a function to transpose data. This is especially useful if the
data is in the wrong format and it would take several minutes to transpose it by using other applications.
For example Google Docs the only external data source currently available does not
have a function to transpose the data. The transpose option is available among the gadget settings
(almost at the bottom of the gadget options frame) when adding the gadget to the spreadsheet.</p><br/>

<b>Interactively changing gadget settings</b><br/>
<p>Using Google Docs it is not possible to change the gadget settings without losing all changes that
have been made in the visualisation. That means if changes like filters, swapped axes, hidden
data,... have been made they will be reset when changing the gadget parameters with the default
Google gadget settings. This is due to the fact that a new gadget request is sent by Google and the
visualisation is created once again.</p>

<p>Using the Options Panel the user is able to change the parameters dynamically while
exploring the data. This is done through a separate gadget settings menu displayed to the left side
of the visualisation.</p><br/>

<h2 class="title">Data Format</h2>
<p>The data format of this visualisation can be seen in the <a href="dataformats.html#multidimensional">data formats document</a>.</p>
<br /><br />


<h2 class="title">Parameter List</h2>

<table width="1290" border="1">
  <tr>
    <td width="65" align="center">Number</td>
    <td width="225" align="left">Parameter</td>
    <td width="98" align="center">Type</td>
    <td width="163" align="center">Options</td>
    <td width="705" align="left">Description</td>
  </tr>
  <tr>
    <td align="center">1</td>
    <td align="left">X-Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The x-size available to the gadget.</td>
  </tr>
  <tr>
    <td align="center">2</td>
    <td align="left">Y-Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The y-size available to the gadget.</td>
  </tr>
    <tr>
    <td align="center">3</td>
    <td align="left">Show Axis Labels Above</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show axis labels above or beneath the axis.</td>
  </tr>
  <tr>
    <td align="center">4</td>
    <td align="left">Legend</td>
    <td align="center">String</td>
    <td align="center">No Legend | Horizontal | Vertical</td>
    <td align="left">Determines the legend position.</td>
  </tr>
  <tr>
    <td align="center">5</td>
    <td align="left">Title</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">Diagram Title - displayed above the visualisation.</td>
  </tr>
  <tr>
    <td align="center">6</td>
    <td align="left">Line Thickness</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The size used to draw the lines representing the entities.</td>
  </tr>
  <tr>
    <td align="center">7</td>
    <td align="left">Data Point Format</td>
    <td align="center">String</td>
    <td align="center">Square | Square Hollow | Circle | Circle Hollow | Diamond | Diamond Hollow | Cross | None</td>
    <td align="left">The initial data point format used for all entities.</td>
  </tr>
  <tr>
    <td align="center">8</td>
    <td align="left">Data Point Size</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The default data point size.</td>
  </tr>
  <tr>
    <td align="center">9</td>
    <td align="left">Number Display Format</td>
    <td align="center">String</td>
    <td align="center">No Formatting | 1,000.00 | 1.000,00</td>
    <td align="left">Defines how numbers are to be displayed within the diagram.</td>
  </tr>
  <tr>
    <td align="center">10</td>
    <td align="left">Selected Line Thickness</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">The size used to draw selected entity lines.</td>
  </tr>
  <tr>
    <td align="center">11</td>
    <td align="left">Show Inverse Buttons</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">These options set whether the inverse buttons and the range labels of the axes are to be displayed
or not. By not showing them the available space for the visualisation grows in size.</td>
  </tr>
  <tr>
    <td align="center">12</td>
    <td align="left">Show Ranges</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show axis ranges.</td>
  </tr>
  <tr>
    <td align="center">13</td>
    <td align="left">Line Mouseover Extra Space</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Additonal size in pixels which is added to an entity's line when determining if the mouse cursor is over the entity line.</td>
  </tr>
  <tr>
    <td align="center">14</td>
    <td align="left">Number Input Format</td>
    <td align="center">String</td>
    <td align="center">No Formatting | 1,000.00 | 1.000,00</td>
    <td align="left">Determines the format in which the supplied data is formatted.</td>
  </tr>
  <tr>
    <td align="center">15</td>
    <td align="left">Inverted Axes</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines if all axes are inverted per default.</td>
  </tr>
  <tr>
    <td align="center">16</td>
    <td align="left">Line Alpha</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Alpha value used to draw the entity lines.</td>
  </tr>
  <tr>
    <td align="center">17</td>
    <td align="left">Host URL</td>
    <td align="center">String</td>
    <td align="center"></td>
    <td align="left">URL of the gadget. There needs to be a colour scheme file available at "./common/color-schemes.xml" or the standard colour scheme will be used. 
The precompiled font files which can be loaded on runntime have to be stored in "./common/fonts/".</td>
  </tr>
  <tr>
    <td align="center">18</td>
    <td align="left">Show Title</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the diagram title.</td>
  </tr>
  <tr>
    <td align="center">19</td>
    <td align="left">Use Ratio</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Determines whether to use a custom display ratio or not. If yes, x-ratio and y-ratio need to be supplied also.</td>
  </tr>
  <tr>
    <td align="center">20</td>
    <td align="left">X-Ratio</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Width ratio factor.</td>
  </tr>
  <tr>
    <td align="center">21</td>
    <td align="left">Y-Ratio</td>
    <td align="center">Number</td>
    <td align="center"></td>
    <td align="left">Height ratio factor.</td>
  </tr>
  <tr>
    <td align="center">22</td>
    <td align="left">Show Filters</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show filters to filter data at each axis according to its minimum and maximum filters.</td>
  </tr>
  <tr>
    <td align="center">23</td>
    <td align="left">Show Filter Labels</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show filter labels, indicating each filters value.</td>
  </tr>
  <tr>
    <td align="center">24</td>
    <td align="left">Show Axis Label</td>
    <td align="center">Boolean</td>
    <td align="center">true | false</td>
    <td align="left">Show or hide the labels of all axes.</td>
  </tr>
</table>

</body>
</html>
